<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="css/SYSFrame.css" rel="stylesheet" type="text/css" />
    <link href="font/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="css/module.css" rel="stylesheet" type="text/css" />
    <link href="css/pages.css" rel="stylesheet" type="text/css" />
    <title>订单列表</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/HUpages.js" type="text/javascript"></script>
    <script src="js/layer/layer.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
    <![endif]-->
</head>
<body id="pagestyle" class=" backgrounddd">
<div class="box-module">
    <div class="box-title">状态分类</div>
    <div class="box-content padding15">
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-green">
                <div class="status_amount">343533</div>
                <div class="status_name bg_color_green">全部订单</div>
            </div>
        </div>
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-red">
                <div class="status_amount">123533</div>
                <div class="status_name bg_color_red">已完成</div>
            </div>
        </div>
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-azure">
                <div class="status_amount">5433</div>
                <div class="status_name bg_color_azure">已取消</div>
            </div>
        </div>
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-orange">
                <div class="status_amount">3213</div>
                <div class="status_name bg_color_orange">待收款</div>
            </div>
        </div>
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-purple">
                <div class="status_amount">35653</div>
                <div class="status_name bg_color_purple">待发货</div>
            </div>
        </div>
        <div class="clearfix col-xs-6 col-sm-2 padding5">
            <div class="statusbox bg-bule">
                <div class="status_amount">1342</div>
                <div class="status_name bg_color_bule">待收货</div>
            </div>
        </div>
    </div>
</div>
<div class="box-module">
    <div class="box-title">订单列表</div>
    <div class="box-content padding15">
        <div class="operation  clearfix  relative mb15">
            <div class="cell-item col-xs-12 col-sm-7 margin0 col-sm-4">
                <label class="cell-left label_name">搜索：</label>
                <div class="cell-right">
                    <input name="" type="text" class="col-xs-6 col-lg-12 mr10">
                    <button type="button" href="javascript:void(0)" class="btn button_btn btn-danger" onclick=""><i class="iconfont">&#xe60e</i>&nbsp;搜索</button>
                </div>
            </div>
            <div class="l_f clearfix"><button type="button" href="javascript:void(0)" class="btn button_btn btn-danger" onclick=""><i class="iconfont">&#xe6b4</i>&nbsp;删除选中</button></div>
            <span class="sumQuantity">合计数量：<em id="quantity"></em>条</span>
        </div>
        <div id="orderlist"></div>
        <div class=" padding10 Paging clearfix" id="Paging"></div>
    </div>
</div>
</body>
<div id="deliverystyle" style="display: none;">
    <ul class="clearfix add_style padding15" id="VerifyTips">
        <li class="cell-item">
            <label class="cell-left label_name">订单号:</label>
            <div class="cell-right font-size14 colorgreen" id="order_number"></div>
        </li>
        <li class="cell-item">
            <label class="cell-left label_name">快递单号:</label>
            <div class="cell-right"><input data-name="快递单号" id="express_order" name="Required" data-number="express_order" data-verify="verify" type="text" class="col-xs-6 col-lg-12"></div>
        </li>
        <li class="cell-item">
            <label class="cell-left label_name">快递公司:</label>
            <div class="cell-right" id="kuaidiname"></div>
        </li>
        <li class="cell-item">
            <label class="cell-left label_name">备注:</label>
            <div class="cell-right">
                <textarea data-name="备注" name="Required" class="form-textarea textarea-info" id="form_textarea" placeholder=""></textarea>
            </div>
        </li>
    </ul>
</div>

</html>
<script>
    $(function() {
        $("#pagestyle").Hupage({
            slide: '#breadcrumb',
            scrollbar: function(e) {
                e.niceScroll({
                    cursorcolor: "#dddddd",
                    cursoropacitymax: 1,
                    touchbehavior: false,
                    cursorwidth: "3px",
                    cursorborder: "0",
                    cursorborderradius: "3px",
                });
            },
            expand: function(thisBox, settings) {
                settings.scrollbar(thisBox); //设置当前页滚动样式
            }
        });
    });
    //编辑数据
    var orderlist = function(callback) {
        $.ajax({
            url: "json/products.json",
            type: "GET",
            dataType: 'json',
            success: function(ret) {
                typeof callback == 'function' && callback(ret);
            },
        });
    };
    orderlist(function(listArr) {
        $.ajax({
            url: "html/order/table.html",
            type: "GET",
            dataType: "html",
            success: function(result) {
                $('body').append("<script id='orderlisthtml' type='text/html'>" + result + "</script\>");
                var listhtml = $('#orderlist');
                var s = listArr.order.length;
                $("#quantity").html(s);
                var setTotalCount = s;
                var pagenum = 10;
                $('#Paging').paging({
                    initPageNo: 1, // 初始页码
                    totalPages: Math.round(setTotalCount / pagenum), //总页数
                    totalCount: '合计' + setTotalCount + '条数据', // 条目总数
                    slideSpeed: 600, // 缓动速度。单位毫秒
                    jump: true, //是否支持跳转
                    callback: function(page) {
                        var currentPages = page * pagenum < s ? pagenum : s - (page - 1) * pagenum;
                        var html = template('orderlisthtml', {
                            page: page, //当前页数
                            pagenum: pagenum, //显示数量
                            pagenumber: currentPages, //页码
                            order: listArr.order,
                            product: listArr.data,
                            status: listArr.orderstatus
                        });
                        listhtml.html('');
                        listhtml.append(html);
                        new TableSorter("tableList", 3, 4, 5, 6); //设置
                        $("#orderlisthtml").remove(); //加载完毕删除模版路径

                    } // 回调函数
                });

            }
        });
    });
    //按钮操作
    //按钮操作
    function editorbtn(obj, id) {
        var url = $(obj).attr("data-url");
        window.location.href = url;

    }
    //发货处理
    function fahuobtn(obj, id) {
        var fahuocontent = function(callback) {
            $.ajax({
                url: "json/products.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        fahuocontent(function(dataArr) {
            var name = dataArr.order.filter(function(e) {
                return e.id == id;
            });
            var d = name[0].ordernumber;
            document.getElementById("order_number").innerHTML = d;
            var kuaidi = document.getElementById("kuaidiname");
            var selects = document.createElement("select");
            kuaidi.appendChild(selects).className = "selectList";
            for(var i = 0; i < dataArr.kuaidi.length; i++) {
                var options = document.createElement("option");
                selects.appendChild(options).value = dataArr.kuaidi[i].id;
                selects.appendChild(options).dataset.code = dataArr.kuaidi[i].code;
                selects.appendChild(options).innerText = dataArr.kuaidi[i].name;
                var express_order = document.getElementById("express_order");
            }
            express_order.onkeyup = function() {
                var munber = express_order.value;
                var sub = munber.substring(0, 3);
                if(munber.length >= 3) {
                    for(var s = 0; s < selects.options.length; s++) {
                        if(sub == selects.options[s].dataset.code) {
                            selects.options[s].selected = true;
                            return false;
                        }
                    }
                    var b = document.body.querySelector(".box_Bullet");
                    if(!b) {
                        var box = document.createElement("div");
                        document.body.appendChild(box).className = "box_Bullet";
                        document.body.appendChild(box).innerHTML = "该快递号格式不正确，请从新输入!";
                        box.style.cssText = "margin-left:" + (-box.offsetWidth / 2) + "px" + ";" + "margin-top:" + (-box.offsetHeight / 2) + "px";
                        var int = setInterval(function() {
                            clock()
                        }, 1000);
                        var num = 2;

                        function clock() {
                            num > 0 ? num-- : clearInterval(int);
                            if(num == 0) {
                                clearInterval(int);
                                document.body.removeChild(box);
                                return
                            }
                        }
                    }
                }
            };

            layer.open({
                type: 1,
                title: '订单发货',
                area: ['500px', '400px'],
                shadeClose: true,
                content: $('#deliverystyle'),
                btn: ['发货', '取消'],
                yes: function(index, layero) {
                    new huprompt("VerifyTips");
                }
            });

        })

    }
</script>
<script src="js/common.js" type="text/javascript"></script>
